{% extends "base.html" %}

{% set current_menu = 'customer' %}
{% set current_page = 'customer_list' %}

{% block title %}客户管理 - 客户详情{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto space-y-6">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('customer.list_customers') }}" class="text-gray-500 hover:text-gray-700">客户管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">客户详情</li>
        </ol>
    </nav>

    <!-- 客户基本信息卡片 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="p-6">
            <div class="flex justify-between items-start">
                <div class="flex items-center">
                    <div class="flex-shrink-0 h-16 w-16">
                        <div class="h-16 w-16 rounded-full bg-blue-100 flex items-center justify-center">
                            <i class="fas fa-building text-blue-500 text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <h2 class="text-2xl font-bold text-gray-900">{{ customer.name }}</h2>
                        <p class="text-sm text-gray-500">客户编号: {{ customer.customer_number }}</p>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <a href="{{ url_for('customer.edit_customer', customer_id=customer.id) }}" class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition">
                        <i class="fas fa-edit mr-2"></i>编辑
                    </a>
                    <button class="delete-customer px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition" data-id="{{ customer.id }}" data-name="{{ customer.name }}">
                        <i class="fas fa-trash mr-2"></i>删除
                    </button>
                </div>
            </div>

            <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">客户分类</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if customer.category == '企业' %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">企业</span>
                                {% elif customer.category == '个人' %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">个人</span>
                                {% else %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{{ customer.category or '未设置' }}</span>
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">客户来源</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if customer.source in ['网络推广', '电话营销', '展会活动', '客户推荐', '合作伙伴'] %}
                                    {{ customer.source }}
                                {% else %}
                                    {{ customer.source or '未设置' }}
                                    {% if customer.source_other %}
                                    <span class="text-xs text-gray-500">(其他: {{ customer.source_other }})</span>
                                    {% endif %}
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">客户归属地</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if customer.location == '本地' %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">本地</span>
                                {% elif customer.location == '外地' %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">外地</span>
                                {% else %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{{ customer.location or '未设置' }}</span>
                                    {% if customer.location_other %}
                                    <span class="text-xs text-gray-500">(其他: {{ customer.location_other }})</span>
                                    {% endif %}
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">负责人</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ customer.manager.name if customer.manager else '未分配' }}</dd>
                        </div>
                        <!-- 线索来源信息 -->
                        {% if customer.converted_from_lead_id %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">来源线索</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                <a href="{{ url_for('lead.lead_detail', lead_id=customer.converted_from_lead_id) }}" class="text-primary hover:text-blue-600">
                                    {{ customer.converted_from_lead.name if customer.converted_from_lead else '已删除' }}
                                </a>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">转化日期</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ customer.conversion_date | format_time if customer.conversion_date else '未知' }}</dd>
                        </div>
                        {% endif %}
                    </dl>
                </div>
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-4">联系信息</h3>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">联系电话</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ customer.phone }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">电子邮箱</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ customer.email }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">客户地址</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if customer.province or customer.city or customer.district or customer.address %}
                                    {% if customer.province %}{{ customer.province }}{% endif %}
                                    {% if customer.city %}{{ customer.city }}{% endif %}
                                    {% if customer.district %}{{ customer.district }}{% endif %}
                                    {% if customer.address %}{{ customer.address }}{% endif %}
                                {% else %}
                                    未设置
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">公司网站</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {% if customer.website %}
                                <a href="{{ customer.website }}" target="_blank" class="text-primary hover:text-blue-600">{{ customer.website }}</a>
                                {% else %}
                                -
                                {% endif %}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            <!-- 转化原因信息 -->
            {% if customer.conversion_reason %}
            <div class="mt-6">
                <h3 class="text-lg font-medium text-gray-900 mb-2">转化原因</h3>
                <p class="text-sm text-gray-700">{{ customer.conversion_reason }}</p>
            </div>
            {% endif %}

            <div class="mt-6">
                <h3 class="text-lg font-medium text-gray-900 mb-2">备注信息</h3>
                <p class="text-sm text-gray-700">{{ customer.remarks if customer.remarks else '暂无备注信息' }}</p>
            </div>
        </div>
    </div>

    <!-- 联系人信息 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-medium text-gray-900">联系人信息</h3>
            <a href="{{ url_for('customer.create_contact', customer_id=customer.id) }}" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                <i class="fas fa-plus mr-2"></i>添加联系人
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            姓名
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            职位
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            电话
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            邮箱
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            主要联系人
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for contact in customer.contacts %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            {{ contact.name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ contact.position }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ contact.phone }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ contact.email }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {% if contact.is_primary %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                是
                            </span>
                            {% else %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                否
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ url_for('customer.edit_contact', contact_id=contact.id) }}" class="text-indigo-600 hover:text-indigo-900">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button class="delete-contact text-red-600 hover:text-red-900" data-id="{{ contact.id }}" data-name="{{ contact.name }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">
                            暂无联系人信息
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 跟进记录 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-medium text-gray-900">跟进记录</h3>
            <a href="{{ url_for('customer.create_follow_up', customer_id=customer.id) }}" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                <i class="fas fa-plus mr-2"></i>添加跟进记录
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            跟进时间
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            跟进方式
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            跟进内容
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            跟进结果
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            跟进人
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            下次跟进时间
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for followup in customer.followups %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ followup.created_at | format_time }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ followup.method }}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">
                            <div class="max-w-xs truncate" title="{{ followup.content }}">
                                {{ followup.content }}
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">
                            <div class="max-w-xs truncate" title="{{ followup.result }}">
                                {{ followup.result if followup.result else '-' }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ followup.manager.name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ followup.next_followup_time | format_date if followup.next_followup_time else '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ url_for('customer.edit_follow_up', followup_id=followup.id) }}" class="text-indigo-600 hover:text-indigo-900">
                                    <i class="fas fa-edit"></i>
                                </a>
                                {% if followup.attachment %}
                                <button class="view-attachment text-green-600 hover:text-green-900" data-id="{{ followup.id }}" data-attachment="{{ followup.attachment }}">
                                    <i class="fas fa-eye"></i>
                                </button>
                                {% endif %}
                                <button class="delete-followup text-red-600 hover:text-red-900" data-id="{{ followup.id }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="px-6 py-4 text-center text-sm text-gray-500">
                            暂无跟进记录
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 关联项目 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-medium text-gray-900">关联项目</h3>
            <button id="associate-project-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                <i class="fas fa-plus mr-2"></i>关联项目
            </button>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            项目名称
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            项目编号
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            项目类型
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            负责人
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            状态
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            进度
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% set customer_projects = customer.projects if customer.projects else [] %}
                    {% for project in customer_projects %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            <a href="{{ url_for('project.project_detail', project_id=project.id) }}" class="hover:text-primary">{{ project.name }}</a>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ project.project_number or '无' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ project.project_type or '产品研发' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ project.manager.name if project.manager else '未分配' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                {% if project.status == '未开始' %}bg-gray-100 text-gray-800
                                {% elif project.status == '进行中' %}bg-blue-100 text-blue-800
                                {% elif project.status == '已完成' %}bg-green-100 text-green-800
                                {% else %}bg-red-100 text-red-800{% endif %}">
                                {{ project.status }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="h-2.5 rounded-full progress-bar" 
                                     data-progress="{{ project.progress }}"
                                     style="width: {{ project.progress }}%; background-color: {% if project.progress >= 100 %}#10B981{% elif project.progress >= 50 %}#3B82F6{% else %}#F59E0B{% endif %};">
                                </div>
                            </div>
                            <span class="text-xs text-gray-500">{{ project.progress }}%</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ url_for('project.project_detail', project_id=project.id) }}" class="text-primary hover:text-blue-600">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ url_for('project.edit_project', project_id=project.id) }}" class="text-indigo-600 hover:text-indigo-900">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="px-6 py-4 text-center text-sm text-gray-500">
                            暂无关联项目
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 操作记录 -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">操作记录</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作时间
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作人
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作类型
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作内容
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for log in customer.logs %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ log.created_at | format_time }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ log.operator.name if log.operator else '未知' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ log.operation_type }}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">
                            {{ log.operation_content }}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">
                            暂无操作记录
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 删除客户确认模态框 -->
<div id="delete-customer-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">删除客户</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    确定要删除客户 "<span id="delete-customer-name"></span>" 吗？此操作不可撤销。
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <form id="delete-customer-form" method="post">
                    <input type="hidden" id="delete-customer-id" name="customer_id">
                    <button type="button" id="cancel-delete-customer" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 mr-2 hover:bg-gray-400">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-24 hover:bg-red-700">
                        删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 删除联系人确认模态框 -->
<div id="delete-contact-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">删除联系人</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    确定要删除联系人 "<span id="delete-contact-name"></span>" 吗？此操作不可撤销。
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <form id="delete-contact-form" method="post">
                    <input type="hidden" id="delete-contact-id" name="contact_id">
                    <button type="button" id="cancel-delete-contact" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 mr-2 hover:bg-gray-400">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-24 hover:bg-red-700">
                        删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 删除跟进记录确认模态框 -->
<div id="delete-followup-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">删除跟进记录</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    确定要删除这条跟进记录吗？此操作不可撤销。
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <form id="delete-followup-form" method="post">
                    <input type="hidden" id="delete-followup-id" name="followup_id">
                    <button type="button" id="cancel-delete-followup" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 mr-2 hover:bg-gray-400">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-24 hover:bg-red-700">
                        删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 查看附件模态框 -->
<div id="view-attachment-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-3/4 max-w-3xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center">
                <h3 class="text-lg leading-6 font-medium text-gray-900">查看附件</h3>
                <button id="close-view-attachment" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-4">
                <div class="flex justify-center">
                    <img id="attachment-image" src="" alt="附件图片" class="max-w-full max-h-96 object-contain">
                </div>
                <div class="mt-4 text-center">
                    <a id="download-attachment" href="" download class="px-4 py-2 bg-indigo-600 text-white text-base font-medium rounded-md hover:bg-indigo-700">
                        <i class="fas fa-download mr-2"></i>下载附件
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

{% block extra_js %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 删除客户确认模态框
        const deleteCustomerModal = document.getElementById('delete-customer-modal');
        const deleteCustomerName = document.getElementById('delete-customer-name');
        const deleteCustomerId = document.getElementById('delete-customer-id');
        const deleteCustomerForm = document.getElementById('delete-customer-form');
        const cancelDeleteCustomer = document.getElementById('cancel-delete-customer');
        
        document.querySelectorAll('.delete-customer').forEach(button => {
            button.addEventListener('click', function() {
                const customerId = this.getAttribute('data-id');
                const customerName = this.getAttribute('data-name');
                
                deleteCustomerId.value = customerId;
                deleteCustomerName.textContent = customerName;
                
                // 设置表单提交URL
                deleteCustomerForm.action = `/customers/${customerId}/delete`;
                
                deleteCustomerModal.classList.remove('hidden');
            });
        });
        
        cancelDeleteCustomer.addEventListener('click', function() {
            deleteCustomerModal.classList.add('hidden');
        });
        
        // 删除联系人确认模态框
        const deleteContactModal = document.getElementById('delete-contact-modal');
        const deleteContactName = document.getElementById('delete-contact-name');
        const deleteContactId = document.getElementById('delete-contact-id');
        const deleteContactForm = document.getElementById('delete-contact-form');
        const cancelDeleteContact = document.getElementById('cancel-delete-contact');
        
        document.querySelectorAll('.delete-contact').forEach(button => {
            button.addEventListener('click', function() {
                const contactId = this.getAttribute('data-id');
                const contactName = this.getAttribute('data-name');
                
                deleteContactId.value = contactId;
                deleteContactName.textContent = contactName;
                
                // 设置表单提交URL
                deleteContactForm.action = `/contacts/${contactId}/delete`;
                
                deleteContactModal.classList.remove('hidden');
            });
        });
        
        cancelDeleteContact.addEventListener('click', function() {
            deleteContactModal.classList.add('hidden');
        });
        
        // 删除跟进记录确认模态框
        const deleteFollowupModal = document.getElementById('delete-followup-modal');
        const deleteFollowupId = document.getElementById('delete-followup-id');
        const deleteFollowupForm = document.getElementById('delete-followup-form');
        const cancelDeleteFollowup = document.getElementById('cancel-delete-followup');
        
        document.querySelectorAll('.delete-followup').forEach(button => {
            button.addEventListener('click', function() {
                const followupId = this.getAttribute('data-id');
                
                deleteFollowupId.value = followupId;
                
                // 设置表单提交URL
                deleteFollowupForm.action = `/followups/${followupId}/delete`;
                
                deleteFollowupModal.classList.remove('hidden');
            });
        });
        
        cancelDeleteFollowup.addEventListener('click', function() {
            deleteFollowupModal.classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        [deleteCustomerModal, deleteContactModal, deleteFollowupModal].forEach(modal => {
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.classList.add('hidden');
                }
            });
        });
        
        // 查看附件模态框
        const viewAttachmentModal = document.getElementById('view-attachment-modal');
        const attachmentImage = document.getElementById('attachment-image');
        const downloadAttachment = document.getElementById('download-attachment');
        const closeViewAttachment = document.getElementById('close-view-attachment');
        
        document.querySelectorAll('.view-attachment').forEach(button => {
            button.addEventListener('click', function() {
                const attachment = this.getAttribute('data-attachment');
                const attachmentUrl = `/static/uploads/${attachment}`;
                
                attachmentImage.src = attachmentUrl;
                downloadAttachment.href = attachmentUrl;
                downloadAttachment.download = attachment;
                
                viewAttachmentModal.classList.remove('hidden');
            });
        });
        
        closeViewAttachment.addEventListener('click', function() {
            viewAttachmentModal.classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        viewAttachmentModal.addEventListener('click', function(e) {
            if (e.target === viewAttachmentModal) {
                viewAttachmentModal.classList.add('hidden');
            }
        });
        
        // 关联项目按钮点击事件
        const associateProjectBtn = document.getElementById('associate-project-btn');
        if (associateProjectBtn) {
            associateProjectBtn.addEventListener('click', function() {
                // 显示开发中提示
                const devMessage = document.createElement('div');
                devMessage.className = 'fixed top-4 right-4 bg-yellow-500 text-white px-4 py-2 rounded-md shadow-lg z-50';
                devMessage.textContent = '关联项目功能正在开发中...';
                document.body.appendChild(devMessage);
                
                // 3秒后移除提示
                setTimeout(() => {
                    devMessage.remove();
                }, 3000);
            });
        }
    });
</script>
{% endblock %}